<!-- 屏幕监控 -->
<template>
  <div>
    <el-form
      :inline="true"
      :model="editorForm"
      :rules="editorFormRules"
      ref="editorFormRef"
      label-width="100px"
      size="small"
      :show-message="false"
      :hide-required-asterisk="true"
      :status-icon="false"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item :label="$t('宽度')+':'" prop="width">
            <el-input
              v-model="editorForm.width"
              autocomplete="off"
              maxlength="5"
              :show-word-limit="false"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item :label="$t('高度')+':'" prop="height">
            <el-input
              v-model="editorForm.height"
              autocomplete="off"
              maxlength="5"
              :show-word-limit="false"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <bs-screen-capture-button-icon
            v-has="'SCREEN_MONITOR_SCREEN'"
            :show-icon="false"
            @click.native="doCap"
          ></bs-screen-capture-button-icon>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24" v-if="screenImg">
        <img :src="screenImg" width="760px" height="430px">
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { Loading } from 'element-ui'
import DeviceMonitorApi from '@/api/device'
import { mapGetters } from 'vuex'

export default {
  name: 'ScreenStatus',
  data() {
    const width = 4000
    const height = 4000
    return {
      editorForm: {
        width: 1920,
        height: 1080
      },
      tableData: [],
      loading: null,
      editorFormRules: {
        width: { required: true, message: '请输入屏幕宽度', trigger: 'blur' },
        height: { required: true, message: '请输入屏幕高度', trigger: 'blur' },
      },
      twidget: [],
      widgetData: {},
      wrapperWidth: 760,
      wrapperHeight: 425,
      templateOpts: {
        width: width,
        height: height,
      },
      screenImg: '',
      timmer: null
    }
  },
  props: {
    id: {
      default: 0,
    },
    screenId: {
      default: 0
    },
    className: {
      type: String,
      default: '',
    },
    deviceWidgetData: {
      default: () => {}
    }
  },
  mounted() {
    this.$nextTick(function () {
      
    })
  },
  created() {
    this.$eventBus.$on('doShowScreenResutl', this.resetTwidget)
  },
  destroyed() {
    if (this.timmer) {
      clearInterval(this.timmer)
    }
    this.timmer = null
    this.$eventBus.$off('doShowScreenResutl')
  },
  computed: {
    ...mapGetters(['screenData'])
  },
  methods: {
    async doCap() {
      if (this.timmer) {
        clearInterval(this.timmer)
      }
      this.$refs.editorFormRef.validate(async (valid) => {
        if (this.loading === null) {
          this.loading = this.$loading({
            fullscreen: true,
            text: '正在发送终端命令',
          })
        }
        this.editorForm.terminalId = this.id
        this.editorForm.screenId = this.screenId
        const res = await DeviceMonitorApi.commandScreen(this.editorForm) 
        if (this.loading) {
          this.loading.close()
          this.loading = null
        }
        this.$alert(
          '提示',
          'sendPromptOfScreenCapture'
        )
        if (this.timmer) {
          clearInterval(this.timmer)
        }
        this.doCapResult()
      })
    },
    // 发送截屏后获取结果
    doCapResult() {
      this.timmer = setInterval(() => {
        this.resetTwidget()
      }, 2000);
    },
    async resetTwidget() {
      let data = null
      if(this.screenData) {
        try{
          data = eval('(' + this.screenData + ')')
        }catch(error){}
      }
      let imgJson = data.list ? data.list : []
      if(imgJson.length > 0) {
        imgJson.forEach(img => {
          this.screenImg = img.path
          return
        })
      }
    }
  },
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.addWiget {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid $bg-e9;
  height: 48px;
}
.addWiget:hover {
  background-color: $defaultBlue;
  color:#fff;
}
.notclick {
  display: flex;
  justify-content: space-around;
  align-items: center;
  // text-decoration: line-through;
  border-bottom: 1px solid $bg-e9;
  height: 48px;
  pointer-events: none;
  filter: grayscale(10%);
  color: #ddd;
}

.template-main-wrapper {
  border: 1px solid $bg-e9;
  position: relative;

  .compont {
    background: $bg-f4;
  }
}
</style>